/******************************** GENERAL **********************************/
* {
	margin:0;
	padding:o;
}
body{
	background: url(../Images/CharacterBG.jpg) no-repeat 0 540px;
	background-size: 100%;
}
html, body {
	width:100%;
    height:100%;
    min-height:100%;
}
article p{
	font-family: hallo_sansLight;
}
li,a{
	text-decoration:none;
}

ul{
	list-style-type:none;
}
li{
	display:inline;
}
h2{
	font-variant:small-caps;
}
#content article>span {
	background: #7b0000;
	float:left;
	height: 10px;
	margin:80px 0;
	width: 100%;	
}
#content article span h2{
	background: white;
	font-family: hallo_sans;
	font-size: 54px;
	font-variant:small-caps;
	margin: -25px auto;
	text-align: center;
	width: 10%;
}
h2{
	color:#7b0000;
}

.wrapper{
	background-size: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0px auto -400px;
}

.wrap{
	margin:0 auto;
	max-width:1618px;
	width:90%;
}

/* FONT */
/* Quantico */
/* Regular */
@font-face {
    font-family: quantico;
    src: url('../Font/Quantico/quantico_r.eot');
    src: url('../Font/Quantico/quantico_r.eot?#iefix') format('embedded-opentype'),
         url('../Font/Quantico/quantico_r.woff') format('woff'),
         url('../Font/Quantico/quantico_r.ttf') format('truetype'),
         url('../Font/Quantico/quantico_r.svg#quantico') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Bold */
@font-face {
    font-family: quantico_bold;
    src: url('../Font/Quantico/quantico_b.eot');
    src: url('../Font/Quantico/quantico_b.eot?#iefix') format('embedded-opentype'),
         url('../Font/Quantico/quantico_b.woff') format('woff'),
         url('../Font/Quantico/quantico_b.ttf') format('truetype'),
         url('../Font/Quantico/quantico_b.svg#quanticobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Hallo Sans */
/* Light */
@font-face {
    font-family: hallo_sansLight;
    src: url('../Font/HalloSans/hallosans_l.eot');
    src: url('../Font/HalloSans/hallosans_l.eot?#iefix') format('embedded-opentype'),
         url('../Font/HalloSans/hallosans_l.woff') format('woff'),
         url('../Font/HalloSans/hallosans_l.ttf') format('truetype'),
         url('../Font/HalloSans/hallosans_l.svg#hallo_sansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Regular */
@font-face {
    font-family: hallo_sans;
    src: url('../Font/HalloSans/hallosans.eot');
    src: url('../Font/HalloSans/hallosans.eot?#iefix') format('embedded-opentype'),
         url('../Font/HalloSans/hallosans.woff') format('woff'),
         url('../Font/HalloSans/hallosans.ttf') format('truetype'),
         url('../Font/HalloSans/hallosans.svg#hallo_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Bold*/
@font-face {
    font-family: hallo_sansblack;
    src: url('../Font/HalloSans/hallosans_b.eot');
    src: url('../Font/HalloSans/hallosans_b.eot?#iefix') format('embedded-opentype'),
         url('../Font/HalloSans/hallosans_b.woff') format('woff'),
         url('../Font/HalloSans/hallosans_b.ttf') format('truetype'),
         url('../Font/HalloSans/hallosans_b.svg#hallo_sansblack') format('svg');
    font-weight: normal;
    font-style: normal;
}


/******************************** HEADER **********************************/
header{
	background: url(../Images/BG_header.png) repeat-x center -40px;
	background-size: 100%;
	height:650px;
	max-width: 1906px;
	width: 100%;
}

header #PlayGame_BT{
	background: url(../Images/BT_playGame.png) no-repeat;
	border: none;
	float: left;
	font-variant:small-caps;
	height: 199px;
	width: 255px;
}
header #PlayGame_BT a{	
	cursor: pointer;
	color:#DADADA;
	float: left;
	font-family:hallo_sansblack;
	margin: 25px;
	max-width:140px;
	width: 100%;
}
header #PlayGame_BT a:hover{
	color:white;
	text-shadow: 2px 2px 1px #9C0000;
}
header #PlayGame_BT p{
	font-family:hallo_sansblack;
	}
header #PlayGame_BT p:first-child{
	font-size:25px;
}
header #PlayGame_BT p:last-child{
	font-size:62px;
	text-transform: uppercase;
}

/* Main nav */
.slicknav_menu {
	display:none;
}
header nav ul{
	margin-top:30px;
	position:absolute;
	right:12.2%;
}
header nav li {
	float: left;
	text-align: center;
}
header nav li.navDivid{
	background: url(../Images/navList_Dot.jpg) no-repeat center right;
	height: 10px;
	margin: 10px 18px 0;
	width: 9px;
}

header nav li a,header nav+a{
	color:#DADADA;
	font-family: quantico;
	font-variant:small-caps;
	font-size:28px;
	font-size-adjust:0.45;
}
header nav li a:hover,header nav+a:hover{
	color:white;
	text-shadow:1px 1px 1px red;
}
/* Language */
header nav+a{
	float:right;
	margin-top:30px;
}
header #menu  .navDivid+a{
	display:none;
}
/* Logo */
header h1{
	color:black;
	font-family:quantico_bold;
	font-size: 121px;
	height: 0;
	padding-bottom: 17%;
}
#logo{
	margin:0 auto 100px;
	max-width:920px;
	padding:160px 0 0;
	width:100%;
}
#logo p{
	background: white;
	color: #7b0000;
	font-family:hallo_sans;
	font-size: 400%;
	font-variant: small-caps;
	font-size-adjust: 0.39;
	text-align: center;
	margin: -25px auto;
	width: 360px;
}
#logo span{
	background:#7b0000;
	height:10px;
	float:left;
	width:100%;
}

/* Characters */
#characters iframe{
		display:none;
		height:450px;
		width:100%;
	}
#characters .widescreen{
		display:block;
	}
#characters{
	float:left;
	width:100%;
}
#characters p{
	font-family: hallo_sans;
	font-size:40pt;
	font-variant: small-caps;
	height:50px;
	text-align:center;
}
#characters p:nth-child(2){
	color:#aeadad;
	font-size:24pt;
	margin-bottom:20px;
}

#characters .back p{
	font-family: hallo_sansLight;
	font-size: 20px;
	text-align: left;
	width: 200px;
	padding: 80px 0 0 210px;
	font-variant: normal;
	
}
#characters #blue .back p{
	width: 210px;
	padding: 80px 0 0 155px;
}
#characters #yellow .back p {
	padding: 80px 0 0 225px;
	width: 190px;
}
#characters #white .back p {
	padding: 80px 0 0 220px;
	width: 190px;
}
#red,#yellow,#blue,#white{
	float:left;
}
/* Red*/
.flip-container#red,.flip-container#red .front,.flip-container#red .back {
	height: 363px;
}
#red .front{
	background:url(../Images/Red_Front.png) no-repeat;
}
#red .back{
	background:url(../Images/Red_Back.png) no-repeat;
}
/* Yellow */
#yellow .front{
	background:url(../Images/Yellow_Front.png) no-repeat;
}
#yellow .back{
	background:url(../Images/Yellow_Back.png) no-repeat;
}
.flip-container#yellow, .flip-container#yellow .front, .flip-container#yellow .back {
	width:429px;
	height: 370px;
}
.flip-container#yellow .back{
	margin-top:-371px;
}
/* Blue */
#blue .front{
	background:url(../Images/Blue_Front.png) no-repeat;
}
#blue .back{
	background:url(../Images/Blue_Back.png) no-repeat;
}
.flip-container#blue, .flip-container#blue .front, .flip-container#blue .back {
	width:382px;
	height: 366px;
}	
.flip-container#blue .back{
	margin-top:-366px;
}
/* White */
#white .front{
	background:url(../Images/White_Front.png) no-repeat;
}
#white .back{
	background:url(../Images/White_Back.png) no-repeat;
}
.flip-container#white, .flip-container#white .front, .flip-container#white .back {
	width:414px;
	height: 363px;
}

/* FLIP ANIMATION CSS */

/* START: Accommodating for IE */
	.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
	}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
		
/* END: Accommodating for IE */

.flip-container, .front, .back {
	cursor:pointer;
	margin:10px 22px 0;
	width: 422px;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
	top: 0;
	left: 0;
}

.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}

.back {
	-webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	margin-top:-362px;
}
	
		
/***************************** MAIN CONTENT *******************************/
#content{
	float: left;
	width: 100%;
}
article{
	width:100%;
}
/* UPDATES */
#content article#updates span h2{
	background: #f5f5f5;
}
/* slideshow */

#updates article{
	font-family: quantico;
	font-variant:small-caps;
	height:200px;
	padding: 10px 20px;
	width: 85%;
}
#updates article a{
	bottom:80px;
	color:#767676;
	float:right;
	font-size:24px;
	font-size-adjust:0.45;
	position:absolute;
}
#updates article a:hover{
	color:#7b0000;
}
#updates article i{
	color:#767676;
	display:block;
	font-size:18px;
	font-style:normal;
	margin:40px 0 20px;
	text-transform:uppercase;
}
#updates article p{
	font-family: hallo_sansLight;
	font-size:23px;
	font-variant:normal;
	line-height:32px;
}
#updates article p:nth-child(4){
	margin-top:20px;
}
#updates article h2{
	color:#000;
	float:left;
	font-size:26px;
	font-family:quantico;
	font-variant:small-caps;
	text-align: left;
	width:100%;
}
h2 span.newUpdate{
	background: #DA0000;
	border-radius: 4px;
	box-shadow: 2px 2px 0px #7b0000;
	color: #fff;
	font-size: 16px;
	height: 30px;
	margin-left: 20px;
	padding: 2px 8px;
	text-shadow: 1px 1px 1px #860000;
	text-transform: uppercase;
	width: 30px;
}


/* RULES */
/* the hud */
#hudContent,#basicRules .rules{
	background:#f5f5f5;
	border-top:2px solid #dedede;
	border-bottom:2px solid #dedede;
	color:#5d5d5d;
	font-size:26px;
	margin:30px 0 40px;
}
article.legendTXT{
	display:inline-block;
	margin:20px 0;
	width:24%;
}
article.legendTXT p{
	line-height:40px;
}
span.legendNB{
	border:3px solid #bebebe;
	float:left;
	font-family:quantico;
	background:white;
	height:26px;
	line-height:26px;
	margin: 5px 10px 0 0;
	text-align:center;
	width:26px;
}
#hudImage_02{
	display:none;
}
#hudContent #hudImage{
	background:url(../Images/hudIMG.jpg) no-repeat center;
	height:233px;
	width:100%;
}
#hudImage{
	margin-bottom:20px;
}

/* Basic rules */
#basicRules .rules{
	height:268px;
}
#rules_part01,#rules_part02,#rules_part03,#rules_part03,#rules_part04,#rules_part05,#rules_part06,#rules_part07,#rules_part08,#rules_part09{
	float:left;
	padding-top:40px;
}
#basicRules #rules_part01{
	background:url(../Images/nb01_BG.png) no-repeat left 40px;
	height:228px;
	margin-right:15%;
	width:25%;
}
#rules_part01 p,#rules_part04 p,#rules_part05 p,#rules_part07 p,#rules_part08 p,#rules_part09 p{
	height:230px;
}
#rules_part01 p{
	background:url(../Images/winningGoal.png) no-repeat 45% 100px;
}
#basicRules #rules_part02,#rules_part06{
	width:60%;
}
#rules_part02 img,#rules_part02 span{
	float:left;
}

#rules_part02 p{
	background:url(../Images/OverlordFinal_IMG.png) no-repeat bottom center;
	height:229px;
}
#rules_part02 span{
	background:url(../Images/imgDivid.png) no-repeat center;
	font-size:0;
	height:32px;
	margin:60px 15%;
	width:14px;
}
#rules_part04,#rules_part05,#rules_part07,#rules_part08{
	font-family:hallo_sansLight;
	margin-right:3%;
	width:22%;
}
#rules_part04{
	background:url(../Images/nb02_BG.png) no-repeat left 40px;	
}

#rules_part04 p{
	background:url(../Images/tripleBlocks.png) no-repeat 45% 140px;	
}
#rules_part04 img{
	margin:80px 16% 0;
}
#rules_part05{
	background:url(../Images/nb03_BG.png) no-repeat left 40px;	
}
#rules_part05 p{
	background:url(../Images/complementaryBlocks.png) no-repeat 40% 140px;	
}
#rules_part05 i{
	color:#5d5d5d;
	font-size:25px;
}
#rules_part05 a{
	color:#7b0000;
	margin-left:10px;
}
#rules_part05 a:hover{
	text-decoration:underline;
}
#rules_part05 img{
	margin:50px 20% 0;
}
#rules_part06{
	background:url(../Images/nb04_BG.png) no-repeat left 40px;	
	width:50%;
}
#rules_part06 p{
	background:url(../Images/oppositeBlocks.png) no-repeat center bottom;
	height:200px;
}
#rules_part07{
	width:23%;
}
#rules_part07{
	background:url(../Images/nb05_BG.png) no-repeat left 40px;	
}
#rules_part07 p{
	background:url(../Images/grayBlock.png) no-repeat 40% 170px;	
}
#rules_part07 img{
	margin:100px 16% 0;
}
#rules_part08{
	background:url(../Images/nb06_BG.png) no-repeat left 40px;	
}
#rules_part08 p{
	background:url(../Images/pickaxes.png) no-repeat 40% 145px;	
}
#rules_part08 img{
	margin:50px 20% 0;
}
#rules_part09{
	background:url(../Images/nb07_BG.png) no-repeat left 40px;	
	margin-left:5%;
	width:44%;
}
#rules_part09 p{
	background:url(../Images/spawnBlock.png) no-repeat 40% 170px;	
}

#rules_part09 img{
	margin:75px 15% 0;
}

/* Skill blocks */
#skillBlocks,#units{
	color:#5d5d5d;
	font-family:hallo_sansLight;
	font-size:26px;
}
#skillBlocks p,#units p{
	line-height:35px;
	margin-top:30px;
}
#skillBlocks b,#units b{
	color:#7b0000;
}
#skillBlocks iframe{
	height:250px;
	margin:40px 0;
	width:100%;
}

/* Units */
#units ul li{
	line-height:50px;
}
#units ul li img{
	margin:10px 0 0 40px;
	position:absolute;
}
#units span{
float:left;
	font-family:quantico;
	font-variant:small-caps;
	padding:0 20px 0 60px;
	height:50px;
}
#units li:first-child span{
	background:url(../Images/powerMode.png) no-repeat left center;
}
#units li:last-child span{
	background:url(../Images/quantityMode.png) no-repeat left center;
}

/* MAPS */
article#maps iframe{
	border-top: 10px solid #d7d7d7;
	border-bottom: 10px solid #d7d7d7;
	height:600px;
	margin:20px 0;
	width:100%;
}

/* ABOUT */
#about .wrap h2,#rules  h2.wrap{
	color:#7b0000;
	font-family:hallo_sans;
	font-size:45px;
	font-variant:small-caps;
}
article#about{
	background:url(../images/CreatorBG.png) no-repeat 16% 180px;
	max-width:1905px;
	width:100%;
}
article#about,section#project{
	float:left;
}
#about article#creatorTXT{
	display:block;
	margin:130px 0 0 25%;
	width:auto;
}

#about article#creatorTXT p:nth-child(2){
	margin-bottom:10px;
	width:860px;
}
#about article#creatorTXT p:nth-child(3){
	margin-bottom:10px;
}
#about b{
	font-weight:bold;
}
#creatorTXT p a{
	color:#7b0000;
	font-weight:bold;
	text-shadow: 1px 1px 1px #fff;
}
#creatorTXT p a:hover{
	color:#646464;
	text-shadow: 1px 1px 1px #CACACA;
}
#about article#creatorTXT h2{
	color:#292929;
	font-family: hallo_sans;
	font-size:40px;
	font-variant: small-Caps;
	height:50px;
}
#about article#creatorTXT p,#about article#projectTXT p,#about article#projectTXT li{
	color:#646464;
	font-family:hallo_sansLight;
	font-size:25px;
	line-height:36px;
}
/* Reseaux Sociaux */
#reseauxSociaux{
	margin: 30px auto;
	width: 320px;
}
#creator #reseauxSociaux a{
	background:#5a5a5a;
	border:3px solid #9a9a9a;
	border-radius:5px;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	float:left;
	font-family:quantico;
	font-size:36px;
	font-variant:normal;
	height:45px;
	line-height:45px;
	margin-left:25px;
	text-align:center;
	width:45px;
}
#reseauxSociaux a#GooglePlus span{
	display:block;
	margin-top:-8px;
}
#reseauxSociaux a#GooglePlus i{
	font-size:26px;
	font-style:normal;
}
#creator #reseauxSociaux a:hover{
	background:#fff;
	color:#7b0000;
	border:3px solid #7b0000;
}

/* PROJECT */
#about #project{
	background:url(../images/projectBG.png) no-repeat top right;
	margin:80px 0 40px;
}
article#projectTXT{
	margin:0;
	padding:0;
}
#about article#projectTXT p{
	margin:25px 0;
	width:70%;
}
#projectTXT p.boldTXT{
	font-weight:bold;
}
#projectTXT ul{
	margin-top:-20px;
	padding-left:4%;
}
#projectTXT ul li,#units ul li{
	background:url(../images/list_Dot.png) no-repeat left center;
	display:block;
	padding-left:2%;
}
/* Download link */
#about a#download{
	background:#f0f0f0;
	border-top:2px solid #bcbcbc;
	border-bottom:2px solid #bcbcbc;
	text-shadow:2px 2px 2px #D2D2D2;
	color:#757575;
	float:left;
	font-family: hallo_sansLight;
	font-size:58px;
	font-variant:small-caps;
	margin-bottom:80px;
	padding:20px 0;
	text-align:center;
	width:100%;
}

#about a#download:hover{
	background:#fff;
	color:#7b0000;
	border-top:2px solid #7b0000;
	border-bottom:2px solid #7b0000;
}



/******************************** FOOTER **********************************/
footer, .push {
	height: 400px;
	float:left;
}
footer{
	background: url(../Images/BG_footer.png) repeat-x center bottom;
	background-size: 100%;
	max-width: 1906px;
	width: 100%;
}
footer a{
	color:#575757;
	font-size:28px;
	font-family:quantico;
	font-variant:small-caps;
	font-size-adjust:0.45;
}
footer a:hover{
	color:#7b0000;
}
footer a.up{
	background:url(../Images/Up_Arrow.png) no-repeat center right;
	color:#DADADA;
	float:right;
	margin:-100px -20px 0 0;
	padding-right:25px;
}
footer a.up:hover,footer span a:hover{
	color: white;
	text-shadow: 1px 1px 1px red;
}
footer a.up:hover{
	background:url(../Images/Up_Arrow_Hover.png) no-repeat center right;
}
footer p{
	color:#DADADA;
	font-family:quantico;
	font-size:24px;
	font-size-adjust:0.45;
	font-variant:small-caps;
	margin-top:340px;
	text-align:left;
}
footer span{
	float:right;
}
footer span a{
	color:#DADADA;
	font-size:20px;
}
/* Footer Nav */
footer nav ul{
	width:100%;
}
footer nav li{
	margin:140px 0 0;
}
footer nav li a{
	position:absolute;
}
/* Updates*/
footer nav li:first-child a{
	margin: -245px 0 0 280px;
}
/* Rules */
footer nav li:nth-child(2) a{
	margin: -325px 0 0 28.2%;
}
/* Maps */
footer nav li:nth-child(3) a {
	margin: -340px 0 0 48.5%;
}
/* About */
footer nav li:last-child a {
	margin: -195px 0 0 63%;
}

/******************************** FONT FIX FOR SAFARI **********************************/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	::i-block-chrome, header nav ul li a{
		letter-spacing:-4px;
		text-transform:lowercase;
	}
	::i-block-chrome, #logo p{
		letter-spacing:-6px;
		margin-top:-48px;
		text-transform:lowercase;
	}
	::i-block-chrome, #logo p::first-letter{
		font-size:80px;
	}
	
	/* Play the game */
	::i-block-chrome, header #PlayGame_BT p:first-child{
		letter-spacing:-4px;
		word-spacing: 4px;
	}
	::i-block-chrome, header #PlayGame_BT p:first-child::first-letter{
		font-size:30px;
		margin-right:4px;
	}
	::i-block-chrome, #content article span h2{
		margin-top:-45px;
		letter-spacing:-6px;
		text-transform:lowercase;
	}
	::i-block-chrome,#content article span h2::first-letter{
		font-size:75px;
	}
	
}


